<template>
  <div class="about">
    <el-container>
      <el-container>
        <el-main>
          <el-table
            :data="
              pageData.claims.filter(
                (data) =>
                  !search ||
                  data._id.toLowerCase().includes(search.toLowerCase()) ||
                  data.price.toLowerCase().includes(search.toLowerCase()) ||
                  data.accidentTime.toLowerCase().includes(search.toLowerCase()) ||
                  data.applyTime.toLowerCase().includes(search.toLowerCase()) ||
                  data.price.toLowerCase().includes(search.toLowerCase()) ||
                  data.state.toLowerCase().includes(search.toLowerCase())
              )
            "
            style="width: 100%"
          >
            <el-table-column label="理赔编号" prop="_id"> </el-table-column>
            <el-table-column label="受保人" prop="name"> </el-table-column>
            <el-table-column label="事故时间" prop="accidentTime"> </el-table-column>
            <el-table-column label="申请时间" prop="applyTime"> </el-table-column>
            <el-table-column label="保单金额" prop="price"> </el-table-column>
            <el-table-column label="理赔状态" prop="state"> </el-table-column>
            <el-table-column align="right">
              <template slot="header" slot-scope="">
                <el-input v-model="search" size="mini" placeholder="输入关键字搜索" />
              </template>
              <template slot-scope="scope">
                <router-link :to="'claimsUpdate/' + scope.row._id">
                  <el-button
                    style="margin: 10px"
                    size="mini"
                    @click="getClaimsById(scope.row)"
                    >编辑</el-button
                  >
                </router-link>
                <el-button size="mini" type="danger" @click="deleteClaims(scope.row)"
                  >删除</el-button
                >
              </template>
            </el-table-column>
          </el-table>
          <div class="block">
            <el-pagination
              style="padding: 40px 0px"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="pageData.currentPage"
              :page-sizes="[5, 10, 15, 20]"
              :page-size="pageData.pageSize"
              layout="  prev, pager, next, jumper, total, sizes"
              :total="pageData.total"
            >
            </el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
  </div>
</template>
<script>
import { createNamespacedHelpers } from "vuex";
const { mapState, mapMutations, mapActions } = createNamespacedHelpers("claims");
export default {
  data() {
    return {
      search: "",
      token: "",
      userName: "nihao123",
      userLogin: {
        userName: "",
        passWord: "",
      },
    };
  },
  watch: {
    "pageData.currentPage": function (val) {
      // console.log(111);
      this.getClaims(this.pageData);
    },
    "pageData.pageSize": function (val) {
      // console.log(111);
      this.getClaims(this.pageData);
    },
  },
  mounted() {
    this.getClaims(this.pageData);
  },
  computed: {
    ...mapState(["pageData"]),
  },
  methods: {
    ...mapActions(["getClaims", "deleteClaims", "getClaimsById"]),
    ...mapMutations(["changePageSize", "changeCurrentPage"]),
    //翻页
    handleSizeChange(val) {
      this.changePageSize(val);
    },
    handleCurrentChange(val) {
      this.changeCurrentPage(val);
    },
  },
};
</script>
<style>
/* .el-header,
.el-footer {
  background-color: #b3c0d1;
  color: #333;
  text-align: center;
  line-height: 60px;
}

.el-aside {
  background-color: #d3dce6;
  color: #333;
  text-align: center;
  line-height: 200px;
}

.el-main {
  background-color: #e9eef3;
  color: #333;
  text-align: center;
  line-height: 160px;
}

body > .el-container {
  margin-bottom: 40px;
} */
</style>
